<template>
  <el-dropdown-menu>
    <el-dropdown-item :icon="NoneBorderStyle" command="None">
      None
    </el-dropdown-item>
    <el-dropdown-item :icon="SolidBorderStyle" command="solid">
      <SvgIcon name="BorderStyleSolid"></SvgIcon>
      Solid
    </el-dropdown-item>
    <el-dropdown-item :icon="DottedBorderStyle" command="dotted">
      <SvgIcon name="BorderStyleDotted"></SvgIcon>
      Dotted
    </el-dropdown-item>
    <el-dropdown-item :icon="DashedBorderStyle" command="dashed">
      <SvgIcon name="BorderStyleDashed"></SvgIcon>
      Dashed
    </el-dropdown-item>
    <el-dropdown-item :icon="DoubleBorderStyle" command="double">
      <SvgIcon name="BorderStyleDouble"></SvgIcon>
      Double
    </el-dropdown-item>
    <el-dropdown-item divided :icon="BordeWidth1" command="1">
      1
    </el-dropdown-item>
    <el-dropdown-item :icon="BordeWidth2" command="2">
      2
    </el-dropdown-item>

    <el-dropdown-item :icon="BordeWidth4" command="4">
      4
    </el-dropdown-item>

    <el-dropdown-item :icon="BordeWidth6" command="6">
      6
    </el-dropdown-item>

    <el-dropdown-item :icon="BordeWidth8" command="8">
      8
    </el-dropdown-item>

    <el-dropdown-item :icon="BordeWidth10" command="10">
      10
    </el-dropdown-item>
  </el-dropdown-menu>
</template>

<script setup>

import SvgIcon from '@/components/SvgIcon/index.vue';
import { computed, defineProps } from 'vue';
const props = defineProps({
  borderStyle: {
    type: String,
    default: '',
  },
  borderWidth: {
    type: Number,
    default: 1,
  },
});
console.log(props);
const NoneBorderStyle = computed(() => props.borderStyle === 'none' ? 'Check' : '');

const SolidBorderStyle = computed(() => props.borderStyle === 'solid' ? 'Check' : '');
const DottedBorderStyle = computed(() => props.borderStyle === 'dotted' ? 'Check' : '');
const DashedBorderStyle = computed(() => props.borderStyle === 'dashed' ? 'Check' : '');
const DoubleBorderStyle = computed(() => props.borderStyle === 'double' ? 'Check' : '');
const BordeWidth1 = computed(() => props.borderWidth === 1 ? 'Check' : '');
const BordeWidth2 = computed(() => props.borderWidth === 2 ? 'Check' : '');
const BordeWidth4 = computed(() => props.borderWidth === 4 ? 'Check' : '');
const BordeWidth6 = computed(() => props.borderWidth === 6 ? 'Check' : '');
const BordeWidth8 = computed(() => props.borderWidth === 8 ? 'Check' : '');
const BordeWidth10 = computed(() => props.borderWidth === 10 ? 'Check' : '');

</script>

<style>

</style>
